<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path=request.getContextPath();
%>    

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="/resources/css/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="/resources/js/jquery-3.2.1/jquery.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/jquery.validate.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/localization/messages_zh.js"></script>
	
	<script type="text/javascript" src="/resources/css/bootstrap-4.3.1/js/bootstrap.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<a class="navbar-brand" href="/">
		   <img src="/resources/js/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
		</a>
		<a class="navbar-brand" href="#">首页</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon"></span>
		</button>
	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">最热新闻<span class="sr-only">(current)</span></a>
	      </li>
	      
	      
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">功能开发中</a>
	      </li>
	    </ul>
	    
	    <!--搜索框开始  -->
	    <%-- <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form> --%>
	    <!--搜索框结束  -->
	    <ul  class="navbar-nav">
	    <c:choose>
	    	<c:when test="${empty sessionScope.userKey }">
	    		<li class="nav-item">
	       		 <a class="nav-link" href="/user/login">登陆</a>
	      		</li>
	    	</c:when>
	    	<c:otherwise>
		    	<li class="nav-item dropdown">
			        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			          	个人中心
			        </a>
			        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
			          <a class="dropdown-item" href="#">设置</a>
			          <a class="dropdown-item" href="/user/home">个人中心</a>
			          
			          <a class="dropdown-item" href="#">登出</a>
			        </div>
     			 </li>
	    	</c:otherwise>
	    </c:choose>
	    </ul>
	  </div>
	</nav>
	<!--结束导航条  -->
	
	<!--文章的显示  -->
	<div class = "container-fluid" style = "margin-top:20px">
		<div class = "row">
		<!--左侧的频道  -->
		<div class = "col-md-2">
			<!--频道的名字：channelList  -->
				<div class="list-group">
				 	<c:forEach items="${channelList }" var="cl">
				 		 <a href="/articleShow?channelId=${cl.id }" class="list-group-item list-group-item-action">${cl.name }</a>
					</c:forEach>
				</div>
			</div>
		
		
		<!--左侧的频道  -->
			
		
		<!--中间的类别  -->
			<div class = "col-md-6">
				<ul class="nav nav-tabs">
				  
				  
				  <c:forEach items="${categoryList }"  var = "category">
					  <li class="nav-item">
					    	<a class="nav-link" href="/articleShow?channelId=${channelId }&categoryId=${category.id}">${category.name }</a>
					  </li>
				  </c:forEach>
				</ul>
				
				<c:forEach items="${articlePage.list }" var="article">
					<div class="card" style = "margin-top:10px;">
					  <div class="card-body">
					    <blockquote class="blockquote mb-0">
					    	<div class = "row">
					    		<div class = "col-md-3">
					    			<img alt="" src="/pic/${article.picture }">
					    		</div>
					    		<div class = "col-md-9">
							    	<p> <a href="/article/showDetails?id=${article.id }">${article.title }</a> </p>
							      	<p>${article.author.username }</p>
					    		</div>
					    	</div>	
					    </blockquote>
					  </div>
					</div>
				</c:forEach>
				
				
				<!--分页  -->
					<nav aria-label="Page navigation example">
					  <ul class="pagination">
					    <li class="page-item">
					      <a class="page-link" href="/articleShow?pageNum=1" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <c:forEach begin="${articlePage.pageNum-2>1?articlePage.pageNum-2:1 }"
					    	 end="${articlePage.pageNum+2<articlePage.pages?articlePage.pageNum+2:articlePage.pages }" step="1" var = "page">
					   	 	<li class="page-item"><a class="page-link" href="/?pageNum=${page }">${page }</a></li>
					   </c:forEach>
					    <li class="page-item">
					      <a class="page-link" href="/?pageNum=${articlePage.pages }" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>				                                                                                                                  
				<!--分页  -->
			</div>
		
		<!--中间的类别  -->
		
		<!--右侧的最新文章  -->
			<div class = "col-md-4">
				<c:forEach items="${articleListByCreated }" var="abc">
					<div class="card" style="width: 18rem;">
					  <div class="card-body">
					    <h5 class="card-title">${abc.title }</h5>
					    <h6 class="card-subtitle mb-2 text-muted">${abc.author.username }</h6>
					    <p class="card-text">频道：${abc.channel.name }种类：${abc.category.name }</p>
					    <a href="#" class="card-link">查看详情</a>
					    
					    <!--当在session中有值时才可以登录  --> 
					    <c:if test="${!(empty sessionScope.userKey) }"></c:if>
					    <!--当在session中有值时才可以登录  --> 
					       
					  </div>
					</div>	
				</c:forEach>	
			</div>
		<!--右侧的最新文章  -->
		</div>
	</div>
	
	<!--尾部  -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<p class = "collapse navbar-collapse justify-content-center"><font color = "white">开源项目，欢迎指导</font></p>
	</nav>
	<!--尾部  -->

</body>
</html>